<template>
	<view class="form-container" style="border: 2rpx solid black;">

		<carHeader :title="'申请提现'"></carHeader>

		<view class="rongqi">
			<view class="rongqi1">
				<view class="" style="height: 20rpx;">

				</view>
				<view class="yue" style="display: flex;margin-top: 40rpx;">
					<view>
						账户余额 :
					</view>
					<view style="margin-left: 170rpx;  color: red;">
						￥ {{wdcurrentBalance}}
					</view>
				</view>
				
				<view class="form-item" >
					<text class="label">提现金额 :</text>
					<input v-model="wdcashWithdrawal" class="input1" type="number" placeholder-style="color: #ccc" />
					<text class="unit">元</text>
				</view>
				<view class="form-item">
					<text class="label">真实姓名 :</text>
					<input v-model="wdrealName" class="input2" placeholder-style="color: #ccc" />
				</view>
				<view class="form-item">
					<text class="label">请选择银行:</text>
					<picker class="picker" mode="selector" :range="bankOptions" range-key="label"
						@change="handleBankChange">
						<view  class="picker-value" :class="{ 'picker-placeholder': !selectedBank }">
							{{ selectedBank || ' 请选择银行' }}
						</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="label">请输入银行卡号 :</text>
					<input v-model="wdbankcardNumber" class="input3" placeholder-style="color: #ccc" />
				</view>
				<view style="font-size: 18rpx; text-align: center; color: #b4b4b4;">
					车联网服务平台不会通过任何渠道泄露您的个人信息,请放心填写
				</view>
				<view class="">
					<button class="submit-button" @click="tj">确认信息并提交</button>
				</view>
				
				<view class="" style="height:40rpx;">

				</view>
			</view>
		</view>

		<view class="rongqi2">
			<view class="jilu">
				提现记录
			</view>
			<!-- <view class="xiangqing">
				<view class="" style="margin-top: 10rpx;">
					<view class="a1" style="font-weight: 600;">
						商家提现申请
					</view>
					<view class="a2" style="font-size: 20rpx; color: #b4b4b4;">
						核销时间:2022-10-12 11 : 09
					</view>
				</view>
				<view class="" style="margin-left: 180rpx; margin-top: 10rpx;">
					<view class="a3" style="color: red;">
						{{item.money}}
					</view>
					<view class="a4" style="color: #b4b4b4;margin-left: 20rpx;">
						审核中
					</view>
				</view>
			</view> -->

			<block v-for="(item, index) in items" :key="index">
				<view class="xiangqing">
					<view class="" style="margin-top: 10rpx;">
						<view class="a1" style="font-weight: 600;">
							商家提现申请
						</view>
						<view class="a2" style="font-size: 20rpx; color: #b4b4b4;">
							提现时间:{{item.wdwithdrawalRecord}}
						</view>
					</view>
					<view class="" style="margin-left: 180rpx; margin-top: 10rpx;">
						<view class="a3" style="color: red;">
							{{'-'+item.wdcashWithdrawal}}
						</view>
						<view v-if="item.wdStatus===0" class="a4" style="color: #b4b4b4;margin-left: 20rpx;">
							待审核
						</view>
						<view v-else-if="item.wdStatus===1" class="a4" style="color: #b4b4b4;margin-left: 20rpx;">
							提现成功
						</view>
						<view v-else="item.wdStatus===2" class="a4" style="color: #b4b4b4;margin-left: 20rpx;">
							提现失败
						</view>
					</view>
				</view>
			</block>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{},
				wdcashWithdrawal:'',
				wdrealName:'',
				wdbankcardNumber:'',
				wdcurrentBalance:'',
				wdmerchantId:'',
				bankOptions: [{
						value: 'ICBC',
						label: '工商银行'
					},
					{
						value: 'CMB',
						label: '招商银行'
					},
					{
						value: 'ABC',
						label: '农业银行'
					}
				],
				selectedBank: null,
				items: [{
						money: '',
						time: '',
						statis: ''
					}
				]
			};
		},
		onShow() { 
		console.log("页面加载...");
						    var that = this;
						uni.request({
						      url: 'http://localhost:8080/carShopService/consume/list2',
						      method: "GET",
						data:{
							
						},
						      success:function(res){
						        console.log(res.data);
						          that.items=res.data.rows
						   
						      }
						    })
						uni.request({
						      url: 'http://localhost:8080/carShopService/consume',
						      method: "GET",
						data:{
							
							
						},
						      success:function(res){
						        console.log(res.data);
						        that.wdcurrentBalance=res.data.data.wdcurrentBalance;
						        that.items1=res.data.data;
						        console.log(that.wdcurrentBalance)
						      }
						    })
			
		},
		methods: {
			handleBankChange(e) {
				this.selectedBank = this.bankOptions[e.mp.detail.value].label;
			},
			tj() {
				
				const currentTime = new Date();
				const formattedDateTime = `${currentTime.getFullYear()}-${String(currentTime.getMonth() + 1).padStart(2, '0')}-${String(currentTime.getDate()).padStart(2, '0')} ${String(currentTime.getHours()).padStart(2, '0')}:${String(currentTime.getMinutes()).padStart(2, '0')}:${String(currentTime.getSeconds()).padStart(2, '0')}`;
				if(this.wdcashWithdrawal<=this.wdcurrentBalance){
					uni.request({
				      url: 'http://localhost:8080/carShopService/consume/add',
				      method: "POST",
				data:{
					wdcashWithdrawal:this.wdcashWithdrawal,
					wdrealName:this.wdrealName,
					wdbankcardNumber:this.wdbankcardNumber,			
                    wdwithdrawalRecord:formattedDateTime,
					wdcurrentBalance:this.wdcurrentBalance-this.wdcashWithdrawal
                    
					
				},
				success: (res)=>{
					if (res.data.code == 200) {
					uni.navigateTo({
						url: "/pages/jiesuan/jiesuan"
					})
					}
					
				}
				     
				    })
				}else{
					uni.showToast({
						title: "提现失败，余额不够"
					});
				}
				
				
			}
		}
	};
</script>

<style>
	.rongqi {
		width: 94%;
		/* border: 5rpx solid black; */
		margin-left: 20rpx;
		background-color: white;
		position: relative;
		top: -200rpx;
		border-radius: 45rpx;
	}

	.rongqi1 {
		width: 90%;
		/* border: 5rpx solid black; */
		margin-left: 30rpx;
		/* margin-top: 80rpx; */
	}

	.form-item {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label {
		width: 220rpx;
		/* text-align: right; */
		margin-right: 20rpx;

	}

	.input1,
	.input2,
	.input3,
	.picker-value {
		width: 310rpx;
		border: 2rpx solid #eee;
		border-radius: 60rpx;
		margin-left: 50rpx;
		border: 1px solid #ccc;
	}


	.unit {
		margin-left: 10rpx;
	}

	.picker-value {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;

		position: relative;
		/* padding-right: 20rpx; */
		/* 为下拉箭头留出空间 */
	}

	.picker-placeholder {
		color: #ccc;
	}

	.picker-value::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 55rpx;
		transform: translateY(-50%);
		border-left: 5rpx solid transparent;
		border-right: 5rpx solid transparent;
		border-top: 10rpx solid #ccc;
	}

	.submit-button {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #0055ff;
		color: #fff;
		font-size: 26rpx;
		margin-top: 30rpx;
		border-radius: 45rpx;
	}

	.jilu {
		height: 70rpx;
		border-bottom: 3rpx solid #eee;
		line-height: 70rpx;
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 10rpx;
	}

	.rongqi2 {
		width: 94%;
		margin-left: 16rpx;
		background-color: white;
		border-radius: 40rpx;
		border: 4rpx solid white;
		position: relative;
		top: -160rpx;
	}

	.xiangqing {
		display: flex;
		border-top: 4rpx solid #eee;
		border-radius: 15rpx;
	}
</style>